<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'筛选',liner:false}"></header-top>
		<u-datetime-picker :show="show" v-model="value1" mode="date" @confirm="confirm" @cancel="cancel">
		</u-datetime-picker>
		<u-datetime-picker :minDate='mintime' :show="shows" v-model="value2" mode="date" @confirm="confirms" @cancel="cancels">
		</u-datetime-picker>
		<view class="strongtext  mainpadding">
			<text class="titletext textliner">审批状态</text>
		</view>
		<view class="mainpadding2 ffffff">
			<view class="flexbetween">
				<view v-for="(item,index) in list" :key="item.id" @click="change(index)"
					:class="current == index?'select margin_box margin_top':'noselect margin_box margin_top'">
					<text class="shenptext">{{item.name}}</text>
					<view class="selectimage" v-show="current == index?'true':'false'"></view>
				</view>
			</view>
		</view>
		<view class="strongtext  mainpadding">
			<text class="titletext textliner">时间</text>
		</view>
		<view class=" mainpadding2 ffffff">
			<view class="inputbox flexbetween" @click="show = true">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">开始时间</view>
				</view>
				<view class="itembox flexbetween">
					<input type="text" class="inputstyle" placeholder="请选择" disabled v-model="start">
					<view class="righticon2"></view>
				</view>
			</view>
			<view class="inputbox flexbetween" @click="shows = true">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">结束时间</view>
				</view>
				<view class="itembox flexbetween">
					<input type="text" class="inputstyle" placeholder="请选择" disabled v-model="end">
					<view class="righticon2"></view>
				</view>
			</view>
		</view>
		<view class="quebtn margin_top">确定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						name: '全部',
						id: 1
					},
					{
						name: '待审批',
						id: 2
					},
					{
						name: '审批通过',
						id: 3
					},
					{
						name: '审批拒绝',
						id: 4
					},
					{
						name: '已作废',
						id: 5
					},
					{
						name: '已撤回',
						id: 6
					},
				],
				splist: [],
				show: false,
				value1: Number(new Date()),
				shows: false,
				value2: Number(new Date()),
				start: '',
				end: '',
				current: -1,
				mintime:'',
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},

			confirm(e) {
				console.log(e)
				this.mintime = e.value;
				this.end = '';
				this.start = this.date(e.value);
				this.show = false;
			},
			cancel() {
				this.show = false;
			},
			confirms(e) {
				console.log(e);
				this.end = this.date(e.value);
				this.shows = false;
			},
			cancels() {
				this.shows = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.strongtext {
		padding-bottom: 20rpx;
	}

	.quebtn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30rpx auto 0;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		width: 672rpx;
		height: 82rpx;
		background: #00B855;
		border-radius: 41rpx;
		margin-top: 150rpx;
	}

	.flexbetween {
		flex-wrap: wrap;
	}

	.textxz {
		text-align: right;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		margin-right: 18rpx;
	}

	.textxzs {
		font-size: 28rpx;
		margin-top: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		margin-right: 18rpx;
	}

	.shenptext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	/* 未选中状态 */
	.noselect {
		font-size: 24rpx;
		font-weight: 500;
		color: #000000;
		border-radius: 10rpx;
		border: 1rpx solid #999999;
		width: 184rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 选中状态 */
	.select {
		position: relative;
		font-size: 24rpx;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
		width: 184rpx;
		height: 64rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		border: 1rpx solid #0BBDCB;
	}

	.selectimage {
		width: 28rpx;
		height: 26rpx;
		right: -5%;
	}

	.flex1 {
		flex: 3;
	}

	.itembox {
		flex: 7;
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.06);
	}

	.inputstyle {
		font-size: 28rpx;
		color: #999999;
	}

	.inputbox {
		padding-top: 30rpx;

	}
</style>
